<template>
    <div v-if='details==="详情"'>
      <div style="display: flex;justify-content: space-between;">
        <p class="base-info-title">{{$t('internship.reviewDetail')}}</p>
      </div>
      <table  class="table-style-baseinfo">
        <tr>
            <td class="text-right-background-color">{{$t('internship.internshipBase')}}:</td>
            <td class="text-left-background-none">{{dataForm.studentId}}</td>
            <td class="text-right-background-color">{{$t('internship.baseLevel')}}:</td>
            <td class="text-left-background-none">{{dataForm.studentName}}</td>
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('internship.baseLevel')}}:</td>
            <td class="text-left-background-none">{{dataForm.facultyName}}</td>
            <td class="text-right-background-color">{{$t('internship.address')}}:</td>
            <td class="text-left-background-none">{{dataForm.majorName}}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{$t('internship.representative')}}:</td>
          <td class="text-left-background-none"  colspan="3">{{dataForm.grade}}</td>
          <td class="text-right-background-color">{{$t('internship.stopState')}}:</td>
          <td class="text-left-background-none"  colspan="3">{{dataForm.grade}}</td>
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('internship.effectiveDate')}}:</td>
            <td class="text-left-background-none">{{dataForm.typeName}}</td>
            <td class="text-right-background-color">{{$t('internship.effectiveEnd')}}:</td>
            <td class="text-left-background-none">{{dataForm.competitionLevelName}}</td>
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('internship.baseContact')}}:</td>
            <td class="text-left-background-none">{{dataForm.competitionName}}</td>
            <td class="text-right-background-color">{{$t('internship.baseNumber')}}:</td>
            <td class="text-left-background-none">{{dataForm.awardTime}}</td>
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('internship.baseEmail')}}:</td>
            <td class="text-left-background-none">{{dataForm.awardLevel}}</td>
            <td class="text-right-background-color">{{$t('graduate.college')}}:</td>
            <td class="text-left-background-none">{{dataForm.awardLevel}}</td>
            <!-- <td class="text-left-background-none">
              <p v-for="item in dataForm.achievementFileList" :key="item.fileId">
                <a @click="download(item.fileId)">{{item.fileName}}</a>
              </p>
            </td> -->
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('internship.adjunct')}}:</td>
            <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">{{dataForm.remark}}</td>
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('myExamine.CurriculumAccreditationFile')}}:</td>
            <td class="text-left-background-none" colspan="3">
              <p v-for="item in dataForm.fileList" :key="item.fileId">
                <a @click="download(item.fileId)">{{item.fileName}}</a>
              </p>
            </td>
        </tr>
      </table>
      <div style="margin-top:30px" class="audit-title">{{$t('internship.approvals')}}</div>
      <el-table tooltip-effect="light" stripe :data="tableData" ref="historyTable">
        <el-table-column
          :label="$t('internship.numerical')"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column :label="$t('HistoryTable.time')">
          <template slot-scope="props">{{props.row.time | formatDate}}</template>
        </el-table-column>
        <el-table-column :label="$t('internship.approver')" prop="approvorName"></el-table-column>
        <el-table-column :label="$t('internship.department')" prop="roleName"></el-table-column>
        <el-table-column :label="$t('graduate.operate')" prop="roleName"></el-table-column>
        <el-table-column :label="$t('internship.explain')" prop="roleName"></el-table-column>
      </el-table>
      <el-row type="flex" class="row-bg" justify="end">
        <el-button type="text" @click="goBack">{{$t('internship.back')}}</el-button>
      </el-row>
    </div>
    <div style="padding:0 20px;" v-else>
      <!-- <div class="inner-breadcrumb">
        <el-button class="breadcrumb" type="text" v-if="queryForm.flag == '1'" @click="goBack">{{$t('identificationToDoList.MyToDo')}}</el-button>
        <el-button class="breadcrumb" type="text" v-if="queryForm.flag == '2'" @click="goBack">{{$t('identificationAudit.MyAudit')}}</el-button>
        <el-button class="breadcrumb" type="text" v-if="queryForm.flag == '3'" @click="goBack">{{$t('identificationQuery.practicalCourses')}}</el-button>
        <span>/</span>
        <el-button type="text">{{$t('schoolCourseTimeSet.detailes')}}</el-button>
        <el-button type="text" style="float:right;padding:0;" @click="goBack">{{$t('myExamine.goback')}}</el-button>
      </div> -->
      <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
        <div style="display: flex;justify-content: space-between;">
          <p class="base-info-title">{{$t('internship.reviewDetail')}}</p>
        </div>
        <!-- 创新项目 v-if="queryForm.row.type == 'certified_type_project' "-->
        <table  class="table-style-baseinfo">
            <tr>
                <td class="text-right-background-color">{{$t('internship.internshipBase')}}:</td>
                <td class="text-left-background-none">{{dataForm.studentId}}</td>
                <td class="text-right-background-color">{{$t('internship.baseLevel')}}:</td>
                <td class="text-left-background-none">{{dataForm.studentName}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('internship.baseLevel')}}:</td>
                <td class="text-left-background-none">{{dataForm.facultyName}}</td>
                <td class="text-right-background-color">{{$t('internship.address')}}:</td>
                <td class="text-left-background-none">{{dataForm.majorName}}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{$t('internship.representative')}}:</td>
              <td class="text-left-background-none"  >{{dataForm.grade}}</td>
              <td class="text-right-background-color">{{$t('internship.stopState')}}:</td>
              <td class="text-left-background-none"  >{{dataForm.grade}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('internship.effectiveDate')}}:</td>
                <td class="text-left-background-none">{{dataForm.typeName}}</td>
                <td class="text-right-background-color">{{$t('internship.effectiveEnd')}}:</td>
                <td class="text-left-background-none">{{dataForm.competitionLevelName}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('internship.baseContact')}}:</td>
                <td class="text-left-background-none">{{dataForm.competitionName}}</td>
                <td class="text-right-background-color">{{$t('internship.baseNumber')}}:</td>
                <td class="text-left-background-none">{{dataForm.awardTime}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('internship.baseEmail')}}:</td>
                <td class="text-left-background-none">{{dataForm.awardLevel}}</td>
                <td class="text-right-background-color">{{$t('graduate.college')}}:</td>
                <td class="text-left-background-none">{{dataForm.awardLevel}}</td>
                <!-- <td class="text-left-background-none">
                  <p v-for="item in dataForm.achievementFileList" :key="item.fileId">
                    <a @click="download(item.fileId)">{{item.fileName}}</a>
                  </p>
                </td> -->
            </tr>
            <tr>
            <td class="text-left-background-none" colspan="4" ></td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('internship.adjunct')}}:</td>
                <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">{{dataForm.remark}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('myExamine.CurriculumAccreditationFile')}}:</td>
                <td class="text-left-background-none" colspan="3">
                  <p v-for="item in dataForm.fileList" :key="item.fileId">
                    <a @click="download(item.fileId)">{{item.fileName}}</a>
                  </p>
                </td>
            </tr>
        </table>
        <!-- 竞赛获奖 v-if="queryForm.row.type == 'certified_type_competition' "-->
        <!-- <table  class="table-style-baseinfo">
            <tr>
                <td class="text-right-background-color">{{$t('internship.studentId')}}:</td>
                <td class="text-left-background-none">{{dataForm.studentId}}</td>
                <td class="text-right-background-color">{{$t('internship.name')}}:</td>
                <td class="text-left-background-none">{{dataForm.studentName}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('schoolCourseTimeSet.faculty')}}:</td>
                <td class="text-left-background-none">{{dataForm.facultyName}}</td>
                <td class="text-right-background-color">{{$t('internship.major')}}:</td>
                <td class="text-left-background-none">{{dataForm.majorName}}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{$t('internship.grade')}}:</td>
              <td class="text-left-background-none"  colspan="3">{{dataForm.grade}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('internship.IdentificationType')}}:</td>
                <td class="text-left-background-none">{{dataForm.typeName}}</td>
                <td class="text-right-background-color">{{$t('internship.CompetitionLevel')}}:</td>
                <td class="text-left-background-none">{{dataForm.competitionLevelName}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('internship.CompetitionName')}}:</td>
                <td class="text-left-background-none">{{dataForm.competitionName}}</td>
                <td class="text-right-background-color">{{$t('internship.AwardTime')}}:</td>
                <td class="text-left-background-none">{{dataForm.awardTime}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('internship.AwardLevel')}}:</td>
                <td class="text-left-background-none">{{dataForm.awardLevel}}</td>
                <td class="text-right-background-color">{{$t('myIdentificationTable.OtherAwards')}}:</td>
                <td class="text-left-background-none">{{dataForm.otherAwardLevel}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('internship.workTitle')}}:</td>
                <td class="text-left-background-none">{{dataForm.opusName}}</td>
                <td class="text-right-background-color">{{$t('myExamine.AnnexInnovationFile')}}:</td>
                <td class="text-left-background-none">
                  <p v-for="item in dataForm.achievementFileList" :key="item.fileId">
                    <a @click="download(item.fileId)">{{item.fileName}}</a>
                  </p>
                </td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('identificationApplication.ApplicationDescription')}}:</td>
                <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">{{dataForm.remark}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('myExamine.CurriculumAccreditationFile')}}:</td>
                <td class="text-left-background-none" colspan="3">
                  <p v-for="item in dataForm.fileList" :key="item.fileId">
                    <a @click="download(item.fileId)">{{item.fileName}}</a>
                  </p>
                </td>
            </tr>
        </table> -->
      </el-card>
      <!-- <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
        <span>{{$t('schoolCourseTimeSet.standardDetailed')}}</span>
        <div style="width: 99.99%;background-color: #FFEBEB;margin-top: 10px;" >
              <span v-html="curCheckStandard"></span>
        </div>
      </el-card> -->
      <!-- v-if="queryForm.flag == '1'" -->
      <el-card  shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
        <h1 class="condition-title">{{$t('internship.audit')}}</h1>
        <div>
          <el-form 
            :model="internship"
            ref="internship"
            label-width="80px"
            label-position="left"
            style="margin:24px 0 0 12px;"
            :rules="internshipRule">
            <el-form-item :label="$t('internship.auditOpinion')" prop="opinion">
              <el-input maxlength="500" v-model="internship.opinion" type="textarea" :rows="7" :placeholder="$t('identificationToDoList.placeholder1')">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="text-align: right;">
          <span>
            <el-button @click="goBack">{{$t('graduate.cancel')}}</el-button>
            <el-button type="danger" @click="reject">{{$t('identificationToDoList.Reject')}}</el-button>
            <el-button type="primary" @click="pass">{{$t('identificationToDoList.adopt')}}</el-button>
          </span>
        </div>
      </el-card>
      <!-- <el-card  shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin"> -->
        <HistoryTable :tableData="tableData"></HistoryTable>
      <!-- </el-card> -->
    </div>
    
</template>
<script>
import InnovationEntrepreneurshipPracticeApi from "common/src/api/innovative/InnovationEntrepreneurshipPractice";
import {downloadfile} from "common/src/api/upload";
import HistoryTable from './HistoryTable'
export default {
  props: {
    details: {
      type: String
    },
    showFlag: {
      type: Boolean,
      default: false
    },
    dataListProp: {
      type: Object
    }
  },
  components: {
    HistoryTable
  },
  data() {
    return{
      queryForm: {}, //接收路由跳转的数据
      dataForm: {
        opinion: '',
        fileList: [],
        achievementId: '',
        studentId: '',
        practiceId: '',
        calendarId: ''
      }, //表格数据
      curCheckStandard: '',
      curPracticeId: '',
      internship: {
        opinion: '',
        fileList: [],
        achievementId: '',
        studentId: '',
        practiceId: '',
        calendarId: ''
      },
      internshipRule: {
        opinion: [
            {
                required: true,
                message: this.$t('myExamine.reviewComments'),
                trigger: "blur"
            }
        ]
      },
      tableData: []
    }
  },
  watch: {
    showFlag: {
      handler: function(newV, oldV) {
        if (newV) {
          
          // if (this.dataProp === '编辑' || this.dataProp === '详情') {
          // }
        }
      }
    }
    // dataListProp
  },
  
  methods: {
    download (path) {
      downloadfile(path);
    },
    // 驳回
    reject() {
      if (this.internship.opinion.indexOf("$") < 0) {
        if (this.internship.opinion) {
            let practiceIds = [];
            practiceIds.push(this.queryForm.row.practiceId);
            let data = {
              practiceIdList: practiceIds,
              opinion: this.internship.opinion,
              status: 3
            }
            InnovationEntrepreneurshipPracticeApi.examine(data).then((data) => {
              this.$message({
                  type: "success",
                  message: this.$t('identificationToDoList.SuccessfulOperation')
              });
              this.goBack();
            })
        } else {
          this.$message({
              type: "error",
              message: this.$t('myExamine.reviewComments')
          });
        }
      } else {
        this.$message({
            type: "error",
            message: this.$t('identificationToDoList.cannotContain')
        });
      }
    },
    // 通过
    pass() {
      if (this.internship.opinion.indexOf("$") < 0) {
            let practiceIds = [];
            practiceIds.push(this.queryForm.row.practiceId);
            let data = {
              practiceIdList: practiceIds,
              opinion: this.internship.opinion,
              status: 2
            }
            InnovationEntrepreneurshipPracticeApi.examine(data).then((data) => {
              this.$message({
                  type: "success",
                  message: this.$t('identificationToDoList.SuccessfulOperation')
              });
              this.goBack();
        })
      } else {
        this.$message({
            type: "error",
            message: this.$t('identificationToDoList.cannotContain')
        });
      }
    },
    goBack() {
      // this.$emit('goBack');
      this.$emit('cancel-dialog', false);
    },
    // 获取表格数据
    assignment() {
      this.queryForm = this.$route.query;
      this.curPracticeId = this.queryForm.row.practiceId;
      let data_ = {
          calendarId: this.queryForm.row.calendarId,
          type: this.queryForm.row.type,
          achievementId: this.queryForm.row.achievementId,
          practiceId: this.queryForm.row.practiceId,
          examineHistory: 1
      }
      InnovationEntrepreneurshipPracticeApi.identificationGetOne(data_).then((res) => {
          this.dataForm = res.data;
          this.curCheckStandard = `<div style = "width: 100%; word-wrap: break-word; overflow: auto;">${res.data.checkStandard}</div>`
          this.tableData = res.data.listApproveHistory;
      })
    },
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.inner-breadcrumb {
    .breadcrumb {
        span {
            font-weight: normal;
            color: #aaa;
        }
        a {
            font-weight: normal;
            color: #aaa;
        }
        a:hover {
            color: #409eff;
        }
        .last {
            font-weight: bold !important;
            cursor: default !important;
        }
        .disable {
            cursor: default !important;
        }
    }
}
.condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
}
.base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
}
.table-style-baseinfo {
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}
.table-style-baseinfo td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}
.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}
.text-left-background-none {
    text-align: left;
}
</style>